<template>
	<view :class="[pageType == 1 ? 'small-goods-item-relation':'small-goods-item']">
		<view class="small-goods-img">
			<base-img :src='item.goods_image'></base-img>
		</view>
		<view class="small-goods-name">{{item.goods_name}}</view>
		<view class="small-goods-bottom line-v-center">
			<view class="small-goods-price-wrap">
				<view class="small-goods-price" :class="[pageType == 1 ? 'relation-price':'']">￥{{item.goods_price_min}}<text class="unit" v-if='item.goods_unit'>/{{item.goods_unit}}</text></view>
				<view class="small-goods-price-line" v-if='pageType== 0'>￥{{item.market_price_min}}<text class="unit" v-if='item.goods_unit'>/{{item.goods_unit}}</text></view>
			</view>
			<view class="add-cart" @tap.stop='addCart'>
				<image src='/static/cart.png'></image>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		name:"small-goods-item",
		props:{
			pageType:{
				type:Number,
				default:0,// 0--首页/我的收藏，足迹  1--商品详情底部关联商品
			},
			item:Object,
			Authorization:String
		},
		data() {
			return {
			};
		},
		watch:{
			Authorization(newVal,oldVal){
				console.log('newVal',newVal)
				this.Authorization = newVal
			}
		},
		methods:{
			//获取商品详
			addCart(){
				if(!this.Authorization){
					uni.navigateTo({
						url:'/pages/login-page/login/login'
					})
					return;
				}
				uni.showLoading({
					title:'加载中...',
					mask:true,
				})
				app.globalRequest({
					api:app.getApi().goods.goodsDetail,
					data:{
						goods_id:this.item.goods_id
					}
				}).then(res=>{
					uni.hideLoading();
					if(res.code == 0){
						this.$emit('addCart',res.data)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$supplier-goods-color:#3DB963;
	.small-goods-item{
		width:226rpx;
		height: 400rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding:6rpx 6rpx 6rpx;
		box-sizing: border-box;
		position: relative;
		
		
	}
	.small-goods-item-relation{
		width: 100%;
		height: 350rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		box-sizing: border-box;
		position: relative;
		.small-goods-img{
			width: 202rpx;
			height: 202rpx;
			margin:auto;
			border-radius: 16rpx 16rpx 0 0;
			overflow: hidden;
		}
		.small-goods-name{
			width: 202rpx;
			// height: 72rpx;
			font-weight: bold;
			font-size: 26rpx;
			text-align: left;
			margin:auto;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-top:20rpx;
		}
		.relation-price{
			color:#FF5040 !important;
			font-size: 32rpx !important;
		}
	}
	.small-goods-img{
		width: 212rpx;
		height: 212rpx;
		margin:auto;
		border-radius: 16rpx 16rpx 0 0;
		overflow: hidden;
	}
	.small-goods-tip{
		transform: scale(0.5);
		transform-origin: left top;
		width: 144rpx;
		height: 64rpx;
		border-radius: 32rpx 0 32rpx 0;
		background: #FC644C;
		position: absolute;
		left:0;
		top:0;
		font-size: 40rpx;
		color:#fff;
		text-align: center;
		line-height: 60rpx;
		z-index:2;
	}
	.small-goods-name{
		width: 214rpx;
		// height: 72rpx;
		font-weight: bold;
		font-size: 26rpx;
		text-align: left;
		margin:auto;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top:20rpx;
	}
	.small-goods-bottom{
		width: 100%;
		padding:0 10rpx 0 0rpx;
		box-sizing: border-box;
		position: absolute;
		left:0;
		bottom:10rpx;
		justify-content: space-between;
		margin-top:12rpx;
		.small-goods-price-wrap{
			.small-goods-price{
				color:$supplier-goods-color;
				font-size: 30rpx;
				// font-family: DIN-BOLD;
			}
			.small-goods-price-line{
				font-size: 20rpx;
				color:#999;
				// font-family: DIN-BOLD;
				margin-left:4rpx;
				line-height: 26rpx;
				text-decoration: line-through;
			}
		}
		.add-cart{
			width: 48rpx;
			height: 48rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.unit{
		font-size: 20rpx;
		color: #AFB0B2;
	}

</style>